<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>搜索列表页</title>
    <link rel="stylesheet" href="__PUBLIC__/weui/dist/style/weui.css"/>
    <link rel="stylesheet" href="__PUBLIC__/weui/dist/example/example.css"/>
    <script src="__PUBLIC__/weui/dist/example/zepto.min.js"></script>
    <style>
        #bt{
            width:100%;
            height:40px;
        }
        #bt a{
            float:right;
            margin-right:20px;
        }
        #bt a img{
            position: relative;
            top:7px;
        }
        .p1{
            margin-bottom : 8px;
            color: #757575;
            font-size: 0.9em;
        }
        .h4{
            color: #202020;
            font-size: 1.2em;
            font-style: normal;
            word-break: break-all;
        }
        .cat {
            position: fixed;
            bottom: 1px;
            left: 0;
            width: 100%;
            background-color: rgba(255,255,255,0.85);
            color: #898989;
            font-size: 1.1em;
            z-index: 999;
            text-align: center;
        }

        .cat a {
            color: #4192e3;
        }
        .bd-left{
            float : left;
        }
        .bd-right{
            float : right;
        }
        .bd{
            border : 1px solid #1AAD19;
            background : white;
            color : #1AAD19;
        }
        .val{
            color:#fe6c00;
        }
    </style>
</head>
<body>
    <div class="page__bd" >
        <div class="weui-search-bar" id="searchBar">
            <form class="weui-search-bar__form" action="{:U('lis')}" method="get">
                <div class="weui-search-bar__box">
                    <i class="weui-icon-search"></i>
                    <input type="search" class="weui-search-bar__input" id="searchInput" name="name" placeholder="请输入产品名称,型号,规格,供应商查询" required/>
                    <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                </div>
                <label class="weui-search-bar__label" id="searchText">
                    <i class="weui-icon-search"></i>
                    <span>搜索</span>
                </label>
            </form>
            <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
        </div>
    </div>

    <div id="bt">
        <div style="float:left"></div>
        <a href=""> 筛选<img src="__PUBLIC__/images/filter.png" width="25px" alt="" /></a>
    </div>
<div class="page__bd" style="margin-bottom:50px">
    <?php foreach($info as $k=>$v): ?>
    <div class="weui-panel weui-panel_access">
        <div class="weui-panel__bd">
            <div class="weui-media-box weui-media-box_text">
                <a href="{:U('detail',array('wzno'=>$v[wzno]))}" class="weui-media-box__title h4"><?php echo $v['wzmc']; ?></a>
                <p class="weui-media-box__desc p1">型号 : 　　<span class="val"><?php echo $v['gg'][0]; ?></span></p>
                <p class="weui-media-box__desc p1">质量等级 : <span class="val"><?php echo $v['gg'][1]; ?></span></p>
                <p class="weui-media-box__desc p1">型号规格 : <span class="val"><?php echo $v['gg'][2]; ?></span></p>
                <p class="weui-media-box__desc p1">所属分类 : <span class="val"><a href="#"><?php echo $v['flmc']; ?></a></span></p>
                <p class="weui-media-box__desc p1">供货商 : 　<span class="val"><?php echo $v['qc']; ?></span></p>
                <p class="weui-media-box__desc p1" >
                    <div class="bd-left">

                    </div>
                    <div class="button-sp-area bd-right">
                        <a href="javascript:;"  gid="<?php echo $v['wzno']; ?>" class="weui-btn weui-btn_mini weui-btn_default bd"> + 比对 </a>
                    </div>
                </p>
            </div>
        </div>
    </div>
    <?php endforeach; ?>
</div>
<div class="button-sp-area cat">
    <a href="{:U('Cat/cats')}" class="weui-btn weui-btn_plain-primary"><h4>产品分类</h4></a>
</div>
</body>
<script type="text/javascript">
    $(function(){
        var $searchBar = $('#searchBar'),
                $searchResult = $('#searchResult'),
                $searchText = $('#searchText'),
                $searchInput = $('#searchInput'),
                $searchClear = $('#searchClear'),
                $searchCancel = $('#searchCancel');

        function hideSearchResult(){
            $searchResult.hide();
            $searchInput.val('');
        }
        function cancelSearch(){
            hideSearchResult();
            $searchBar.removeClass('weui-search-bar_focusing');
            $searchText.show();
        }

        $searchText.on('click', function(){
            $searchBar.addClass('weui-search-bar_focusing');
            $searchInput.focus();
        });
        $searchInput
                .on('blur', function () {
                    if(!this.value.length) cancelSearch();
                })
                .on('input', function(){
                    if(this.value.length) {
                        $searchResult.show();
                    } else {
                        $searchResult.hide();
                    }
                })
        ;
        $searchClear.on('click', function(){
            hideSearchResult();
            $searchInput.focus();
        });
        $searchCancel.on('click', function(){
            cancelSearch();
            $searchInput.blur();
        });
    });
    var bd_list = '';  //初始化比对的产品id
    $('.bd').click(function(){
        var wzno = $(this).attr('gid');
        if($(this).html() == ' + 比对 '){
            if(bd_list == ''){  //如果还没有比对ID
                $(this).html('已加入比对,点击取消');
                bd_list = wzno;
            }else{
                bd_list = bd_list + ','+ wzno;
                location.href = '__CONTROLLER__/juxtapose/wzno/'+bd_list;
            }
        }else{
            bd_list =  '';
            $(this).html(' + 比对 ')
        }

    })
</script>
</html>
